<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import type { ScriptResultDTO, SseEvent } from "@/types/scriptTemplate";
import api from "@/api";
import { YesIcon, NoIcon } from "@/components/icons";

const visible = ref(false);

const scriptResultList = ref<ScriptResultDTO[]>([]);

const exec = (machineId: string, scriptId: string) => {
  scriptResultList.value = [];
  visible.value = true;
  api.scriptTemplate.execScriptTemplate(
    {
      id: scriptId,
      machineIds: [machineId]
    },
    (event: SseEvent) => {
      console.log(event);
      scriptResultList.value.push(JSON.parse(event.data));
    }
  );
};

defineExpose({ exec });
</script>
<template>
  <el-dialog v-model="visible" title="执行日志" :close-on-click-modal="false">
    <div h-500px flex-1 overflow-y-scroll>
      <div
        flex
        items-center
        v-for="item in scriptResultList"
        :key="item.message"
        style="white-space: pre-wrap"
      >
        {{ item.message }}
        <YesIcon w-30px h-30px v-if="item.success" />
        <NoIcon w-30px h-30px v-else />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
